<template>
  <div class="content-container">
    <el-row justify="space-between" align="middle" class="poster-title">
      <h2>我的作品和模版</h2>
    </el-row>
    <el-tabs v-model="isTemplate" @tab-change="changeCategory">
      <el-tab-pane name="0" label="我的作品"></el-tab-pane>
      <el-tab-pane name="1" label="我的模版"></el-tab-pane>
    </el-tabs>
    <el-empty v-if="works.length === 0 && !isLoading" description="还没有任何作品">
      <el-button type="primary" size="large" @click="createWork">创建你的第一个设计 🎉</el-button>
    </el-empty>

    <works-list :list="works" :loading="isLoading" @on-delete="onDelete" @on-copy="onCopy" />

    <el-row v-if="works.length > 0" justify="space-between" align="middle" style="margin-top: 20px">
      <div class="el-pagination is-background">
        <el-button
          class="btn-prev is-first"
          :disabled="isFirstPage"
          :icon="ArrowLeft"
          @click="loadPrevPage"
        ></el-button>
        <ul class="el-pager">
          <li
            v-for="item in totalPage"
            :key="item"
            class="number"
            :class="{ 'is-active': pageIndex + 1 === item }"
            @click="goToPage(item - 1)"
          >
            {{ item }}
          </li>
        </ul>
        <el-button class="btn-next" :disabled="isLastPage" :icon="ArrowRight" @click="loadMorePage"></el-button>
        <span class="el-pagination__sizes is-last">
          <el-select v-model="pageSize" placeholder="请选择" @change="changePageSize">
            <el-option v-for="item in pageSizesOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </span>
      </div>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { useTemplatesStore } from '@/stores/templates'
import { useGlobalStore } from '@/stores/global'
import { useEditorStore } from '@/stores/editor'
import useLoadMore from '@/hooks/useLoadMore'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const editor = useEditorStore()
const templates = useTemplatesStore()
const global = useGlobalStore()
const works = computed(() => templates.works)
const total = computed(() => templates.totalWorks)
const isLoading = computed(() => global.isOpLoading('fetchWorks'))
const isTemplate = ref('0')
const pageSizes = [4, 6, 8, 10, 12]
const pageSize = ref(pageSizes[0])

const searchParams = computed(() => ({ pageIndex: 0, pageSize: pageSize.value, isTemplate: isTemplate.value }))

const pageSizesOptions = pageSizes.map(size => {
  return {
    value: size,
    label: `${size}条/页`
  }
})

const { loadMorePage, loadPrevPage, pageIndex, requestParams, goToPage, totalPage, isFirstPage, isLastPage } =
  useLoadMore(templates.fetchWorks, total, searchParams.value)

onMounted(() => {
  templates.fetchWorks(searchParams.value)
})

const changePageSize = (size: number) => {
  pageIndex.value = 0
  requestParams.pageSize = size
  nextTick(() => {
    templates.fetchWorks(searchParams.value)
  })
}

const changeCategory = (key: any) => {
  pageIndex.value = 0
  requestParams.isTemplate = key
  nextTick(() => {
    templates.fetchWorks(searchParams.value)
  })
}

const createWork = async () => {
  const payload = {
    title: '未命名作品',
    desc: '未命名作品',
    coverImg: 'http://lowcode-backend.oss-cn-shenzhen.aliyuncs.com/lowcode-test/5J8ttm.png'
  }
  const workData = await editor.createWork(payload)
  ElMessage.success({ message: '创建作品成功', duration: 2000 })
  router.push(`/editor/${workData.id}`)
}

const onDelete = async (id: number) => {
  await templates.deleteWork(id)
  pageIndex.value = 0
  templates.fetchWorks(searchParams.value)
}

const onCopy = async (id: number) => {
  const workData = await editor.copyWork(id)
  router.push(`/editor/${workData.id}`)
}
</script>
<style lang="scss" scoped>
.content-container {
  background: #fff;
  padding: 0 24px 24px 30px;
  min-height: 85vh;
  max-width: 1200px;
  margin: 50px auto;
  width: 100%;
}
.content-container .ant-input-search {
  width: 30%;
}
.poster-title {
  height: 70px;
}
.poster-title h2 {
  margin-bottom: 0px;
}
.searchResult {
  display: flex;
  align-items: center;
}
#main-chart {
  position: relative;
}
.chart-loading {
  position: absolute;
  left: 50%;
  top: 50%;
}
</style>
